<script lang="ts" setup>
import { computed, onMounted, reactive } from 'vue'
import { appState, exitApp } from '../../../common/manager/appManager'
import { getUserServiceUrl } from '../../../common/service'
import DropdownMenu from '../../../components/normal/DropdownMenu.vue'
import UserCenterWin from './UserCenter/UserCenterWin.vue'

const state:any = reactive({
  popSetting: false,
  userMenu: [
    { label: '个人中心', icon: 'Setting', code: 'setting' },
    { label: '退出系统', icon: 'tuichu', code: 'exit', divided: true }
  ],
  showHeaderIcon: false
})

const currentUserImg = computed(() => {
  const url = appState.currentUser.avatar
  return url ? getUserServiceUrl(appState.currentUser.avatar) : ''
})

const headerImgError = () => {
  state.showHeaderIcon = true
}

const userMenuHandler = (val:any) => {
  if (val.code === 'exit')exitApp()
  else if (val.code === 'setting')popUserSetting()
}

/**
 *
 * @param val
 */
const popUserSetting = (val = true) => {
  state.popSetting = val
}


</script>

<template>
  <el-dropdown placement="bottom">
    <template #default>
      <div class="user-header">
        <div class="user-img">
          <el-image v-if="currentUserImg&&!state.showHeaderIcon"
                    :src="currentUserImg"
                    fit="fill"
                    @error="headerImgError" />
          <v-icon v-else icon="yonghu" class="user-info-icon" />
        </div>
        <div class="user-lb-box">
          <div class="user-lb">
            {{ appState.currentUser.userName }}
          </div>
          <v-icon icon="arrowdown" class="user-icon-down" />
        </div>
      </div>
    </template>
    <template #dropdown>
      <dropdown-menu :source="state.userMenu" @item-click="userMenuHandler" />
    </template>
  </el-dropdown>
  <teleport to="body">
    <user-center-win v-if="state.popSetting"
                     @close="popUserSetting(false)" />
  </teleport>
</template>

<style scoped lang="scss">

.user-header{
  @include hor-group();
  flex:none;
  margin-left: 13px;
  box-sizing: border-box;
  outline: none!important;
  cursor: pointer;

  .user-img{
    @include hor-group(center) ;
    flex:none;
    width:32px;
    height:32px;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
    .user-info-icon {
      @include hor-group(center);
      font-size: 30px;
      color: #066dfe;
      width: 100%;
      height: 100%;
    }
  }
  .user-lb-box{
    @include hor-group();
    flex:none;
    color:var(--w-icon-color);
    .user-lb{
      flex:none;
      padding: 0 7px 0 3px;
      box-sizing: border-box;
    }
    .user-icon-down{
      flex:none;
      font-size:10px;
      color:var(--w-icon-color);
    }
  }

  &:hover{
    .user-lb-box{
      color:var(--w-icon-over);
    }
    .user-icon-down{
      color:var(--w-icon-over);
    }
  }

}

</style>
